<script setup>
import { onMounted, ref, reactive } from 'vue'
import { useCheckMyProfile } from '@/api/signUp'
import { useUserStore } from '@/stores'
const userStore = useUserStore()

// 判断是否报名
const isSignUp = ref(false)
// 存储报名信息
// const myProfile = ref({
//   name: '',
//   class: '',
//   focus: '',
//   time: '',
//   phoneNumber: '',
//   qqNumber: ''
// })
// 使用 reactive 创建响应式对象
const myProfile = reactive({
  studentId: userStore.studentId,
  name: '',
  class: '',
  focus: '',
  time: '',
  phoneNumber: '',
  qqNumber: ''
})
// 添加加载状态
const loading = ref(true)
// 获取报名信息方法
const getMyProfile = async () => {
  try {
    const res = await useCheckMyProfile({ studentId: userStore.studentId })
    if (res.data.status === 1) {
      return ElMessage.error(res.data.message)
    }
    // 判断是否报名过
    if (res.data.name !== '') {
      // 将报名状态改为已报名
      isSignUp.value = true
      // 存到pinia
      userStore.setIsSignUp(isSignUp.value)
    }
    // myProfile.name = res.data.name
    // myProfile.class = res.data.class
    // myProfile.focus = res.data.focus
    // myProfile.time = res.data.time
    // myProfile.phoneNumber = res.data.phoneNumber
    // myProfile.qqNumber = res.data.qqNumber
    // 更新响应式对象的属性
    Object.assign(myProfile, res.data)
  }catch (error) {
    console.error('Error fetching profile:', error)
  } finally {
    // 加载完成
    loading.value = false
  }
}
onMounted(() => {
  if (isSignUp) {
    getMyProfile()
  } else {
    // 如果没有报名，直接结束加载状态
    loading.value = false
  }
})
</script>

<template>
  <div style="font-family: 仓耳非白4-C;" v-if="loading">加载中。。。</div>
  <div style="font-family: 仓耳非白4-C;" v-else>
    <h3 class="message" v-if="!isSignUp">你还没有报名！快报名加入我们吧！</h3>
    <div class="box" v-else>
      <h3 class="message">你已经报名成功啦！</h3>
      <div class="profile">
        <div class="title">我的报名信息：</div>
        <el-form class="detail">
          <el-form-item label="学号">
            <div class="studentId">{{ myProfile.studentId }}</div>
          </el-form-item>
          <el-form-item label="姓名">
            <div class="name">{{ myProfile.name }}</div>
          </el-form-item>
          <el-form-item label="专业班级">
            <div class="professionClass">{{ myProfile.class }}</div>
          </el-form-item>
          <el-form-item label="选择方向">
            <div class="focus">{{ myProfile.focus }}</div>
          </el-form-item>
          <el-form-item label="面试时间">
            <div class="time">{{ myProfile.time }}</div>
          </el-form-item>
          <el-form-item label="联系电话">
            <div class="phoneNumber">{{ myProfile.phoneNumber }}</div>
          </el-form-item>
          <el-form-item label="QQ号">
            <div class="qqNumber">{{ myProfile.qqNumber }}</div>
          </el-form-item>
        </el-form>
      </div>
      <div class="tips">
        TIPS: 如果需要更改报名信息，进入“我要报名”页面，重新填写并报名即可更改
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index {
  font-family: 仓耳非白4-C;
}
.message {
  margin-top: 25px;
}
.title {
  margin: 25px 30px;
}
.detail {
  margin: 0 30px;
}
.tips {
  font-size: 14px;
  color: #606266;
}
</style>